<template>
  <v-app :dark="dark">
    <!-- 左侧导航条 -->
    <v-navigation-drawer
      persistent
      :mini-variant="miniVariant"
      v-model="drawer"
      enable-resize-watcher
      fixed
      app
    >
      <v-toolbar flat class="transparent">
        <v-list class="pa-0">
          <v-list-tile avatar>
            <v-list-tile-avatar>
              <img src="../assets/2.jpeg">
            </v-list-tile-avatar>
            <v-list-tile-content>
              <v-list-tile-title>{{username}}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-toolbar>
      <v-divider/>
      <!-- 左侧菜单 -->
      <v-list class="pt-0" dense>
        <v-list-group
          v-model="item.active"
          v-for="item in items"
          :key="item.title"
          :prepend-icon="item.action"
          no-action
        >
          <!--一级菜单 -->
          <v-list-tile slot="activator">
            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <!-- 二级菜单 -->
          <v-list-tile v-for="subItem in item.items" :key="subItem.title" :to="item.path + subItem.path">
            <v-list-tile-content>
              <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
            </v-list-tile-content>
            <v-list-tile-action>
              <v-icon>{{ subItem.action }}</v-icon>
            </v-list-tile-action>
          </v-list-tile>
        </v-list-group>
      </v-list>
    </v-navigation-drawer>
    <!-- 顶部工具条 -->
    <v-toolbar
      app
      dark
      :color="dark ? 'secondary' : 'primary'"
    >
      <!-- 隐藏左侧菜单的按钮-->
      <v-toolbar-side-icon @click.stop="drawer = !drawer"/>
      <!-- 收起左侧菜单的按钮-->
      <v-btn icon @click.stop="miniVariant = !miniVariant">
        <v-icon v-html="miniVariant ? 'chevron_right' : 'chevron_left'"/>
      </v-btn>
      <!-- 切换黑暗主题 -->
      <v-flex xs1>
        <v-switch
          :label="dark ? '暗黑' : '明亮'"
          v-model="dark"
          color="dark"
          hide-details
        />
      </v-flex>
      <!-- 顶部导航标题 -->
      <v-flex xs3></v-flex>
      <v-toolbar-title v-text="title"/>
      <v-spacer/>

      <!-- 调色板 -->
      <v-btn icon @click.stop="dark = !dark">
        <v-icon>invert_colors</v-icon>
      </v-btn>
      <!-- 顶部导航用户菜单 -->
      <v-btn icon @click.stop="dark = !dark">
        <v-icon>account_box</v-icon>
      </v-btn>
    </v-toolbar>
    <!--中间内容主体-->
    <v-content>
      <v-breadcrumbs :items="breads" divider=">">
      </v-breadcrumbs>
      <div>
        <!--定义一个路由锚点，Layout的子组件内容将在这里展示-->
        <router-view/>
      </div>
    </v-content>
  </v-app>
</template>

<script>
  import menus from "../config/menu";
  import Router from "../router";
  import {route} from "../router.js";
  export default {
    data() {
      return {
        dark: false,// 是否暗黑主题
        drawer: true,// 左侧导航是否隐藏
        miniVariant: false,// 左侧导航是否收起
        title: '乐优商城后台管理',// 顶部导航条名称,
        menuMap: {},
        username:location.search.substring(1),
        map:[
          {"parentId":"/item","childrenId":"/category"},
          {"parentId":"/item","childrenId":"/brand"},
          {"parentId":"/item","childrenId":"/goods"},
          {"parentId":"/user","childrenId":"/statistics"},
          {"parentId":"/item","childrenId":"/specification/Index"}
        ],
      }
    },
    computed: {
      items() {
        return menus;
      },
      item1() {
        const arr = this.$route.path.split("/");
        return this.menuMap[arr[1]].name;
      },
      item2() {
        const arr = this.$route.path.split("/");
        return this.menuMap[arr[1]][arr[2]];
      },
      breads(){
        const arr = this.$route.path.split("/");
        return [this.menuMap["/" + arr[1]], this.menuMap[this.$route.path]];
      }
    },
    name: 'App',
    watch: {},
    methods:{
      userRequest(){
        this.$http.post("/auth/server/toUser"
        ).then((res)=>{
          this.username = res.data
          console.log(this.$router)

          var maps = []
          for (let i = 0; i < this.map.length; i++){
            var rout = this.map[i];
            var child = {};
            var parent = rout.parentId   //    /item
            var chil = rout.childrenId   //   /specification/Index   /category
            console.log(chil);
            var path = parent + chil
            if((chil || "").split("/").length>2){
              //子路径为两级
              var str = (chil || "").split("/")[1]
              child.path = parent + "/"+ str
              child.file = path
              child.name = str.charAt(0).toUpperCase()+str.substring(1).slice(1)
            }else{
              // 自路径为一级
              child.path = path
              child.file = parent + "/" + chil.substring(1).charAt(0).toUpperCase() + chil.substring(1).slice(1);
              child.name = chil.substring(1).charAt(0).toUpperCase() + chil.substring(1).slice(1)
            }
            maps.push(child);
          }
          console.log(maps)
          console.log(this.$router.options.routes[1])
          // this.$router.options.routes[1].children = maps
          //this.$router.options.routes[1].children =
          var routers = [];
          for (let i = 0; i < maps.length; i++){
             console.log(route(maps[i].path,maps[i].file,maps[i].name))
            const route1 = route(maps[i].path,maps[i].file,maps[i].name);
            // this.$router.options.routes[1].children.push(route1)
            // this.$router.options.routes[1].children.push(route1)
            // this.$router.addRoutes(this.$router.options.routes)
          }
        }).catch((res) =>{
            location.href = "http://manage.leyou.com/"
        })
      },
      menusRequest(){
        this.$http.get("/auth/server/menus"
        ).then((res)=>{
          console.log(res)
        }).catch((res)=> {
          alert(res)
        })
      },
      router(){
        this.$http.post("/auth/server/menus"
        ).then((res)=>{
          console.log(res)
        }).catch((res)=> {
          alert(res)
        })
      }
    },

    created() {
      this.userRequest();
      // this.menusRequest();
      // this.router();
      menus.forEach(({path:p1, title:t1, items}) => {
        this.menuMap[p1] = {text:t1, href: p1, disable: false};
        items.forEach(({title:t2, path: p2}) => {
          this.menuMap[p1 + p2] = {text:t2, href: p1 + p2, disable: false};
        })
      })
    }
  }
</script>

<style scoped>
  .box {
    width: 90%;
  }
</style>
